<!-- techPay -->
<template>
  <div class="techPay content_box">
    <div class="header_row flex align-center flex-wrap" v-if="hasBtn('pay:query')">
      <div class="flex align-center m-r-2">
        <span>费用名称：</span>
        <el-input v-model="searchObj.costName" placeholder="费用名称" clearable></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span>用户名：</span>
        <el-input v-model="searchObj.UserName" placeholder="请输入内容" clearable></el-input>
      </div>

      <div class="flex align-center m-r-2">
        <span>日期区间：</span>
        <el-date-picker v-model="searchObj.timeValue" type="daterange" range-separator="至" clearable value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <el-button type="primary" @click="handleFilter">查询</el-button>
    </div>

    <div class="m-b-1 neck_box flex align-center space-between">
      <div class="font">当前费用总价: {{sum|ToFixed}} 元</div>
      <div>
        <!-- <el-button type="danger">批量删除</el-button> -->
        <el-button type="warning" disabled v-if="hasBtn('pay:export')">导出列表</el-button>
      </div>

    </div>

    <el-table class="m-b-1" v-loading="listLoading" :data="list" @sort-change="sortChange" border stripe style="width: 100%">
      <el-table-column type="index" label="序号" align="center" fixed>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center" v-if="hasBtn('pay:audit')">
        <template slot-scope="scope">
          <el-button :type="scope.row.IsAudit ? 'warning' : 'success'" v-if="hasBtn('pay:audit')" size="small" @click="handleClick(scope.index, scope.row)">{{ scope.row.IsAudit ? "反审" : "审核" }}</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="date" label="单号" align="center">
      </el-table-column> -->
      <el-table-column prop="UserName" label="缴纳用户名" align="center" sortable>
      </el-table-column>
      <el-table-column prop="CostName" label="费用名称" align="center" sortable>
      </el-table-column>
      <el-table-column prop="IsDirect" label="直营类型" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.IsDirect">个人直营</span>
          <span v-else>团队直营</span>
        </template>
      </el-table-column>
      <el-table-column prop="Currency" label="费用币种" align="center" sortable>
      </el-table-column>
      <el-table-column prop="Type" label="支付方式" align="center" sortable>
      </el-table-column>
      <el-table-column prop="CreateDate" label="缴纳时间" align="center" sortable width="180">
      </el-table-column>
      <el-table-column prop="Cost" label="费用金额" align="center" sortable>
      </el-table-column>
    </el-table>
    <div class="m-t-2 flex flex-end">
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script>
  import { getTechCostPayee, auditTechCostPayee } from '@/api/system/tech-cost-payee'
  import Pagination from '@/components/Pagination'
  import { deepClone } from '@/utils'
  import { mapState } from 'vuex'

  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'techPay',
    components: { Pagination },
    data() {
      //这里存放数据
      return {
        sum: 0,
        comOptions: [],
        list: [],
        total: 0,
        listLoading: false,
        searchObjTmpl: {},
        searchObj: {
          CostName: '',
          TimeValue: '',
          IdLevl: '',
          IdName: '',
          UserName: ''
        },
        listQuery: {
          PageIndex: 1,
          PageSize: 10,
          UserId: '00000000-0000-0000-0000-000000000000', //缴费用户Id
          ExtendId: '00000000-0000-0000-0000-000000000000', //推荐用户Id
          IsPaging: true, //是否分页
          SortName: 'CreateDate',
          SortType: false
        },
      };
    },
    //监听属性 类似于data概念
    computed: {
      ...mapState({
        userId: state => state.user.id,
      }),
    },
    //监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.searchObjTmpl = deepClone(this.searchObj)
      this.getList()
    },
    activated() { },
    filters: {
      ToFixed(val) {
        return val.toFixed(2)
      }
    },
    //方法集合
    methods: {
      getSummaries(param) {
        const { columns, data = [] } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          if (index === columns.length - 1) { //最后一个
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' 元';
            } else {
              sums[index] = 'N/A';
            }
          }
        });
        return sums;
      },
      resetFilter() {
        this.searchObj = deepClone(this.searchObjTmpl)
        this.handleFilter()
      },
      sortChange(data) {
        const { prop, order } = data
        this.listQuery.SortName = prop
        if (order === 'ascending') {
          this.listQuery.SortType = true
        } else {
          this.listQuery.SortType = false
        }
        this.handleFilter()
      },
      handleFilter() {
        this.listQuery.PageIndex = 1
        this.getList()
      },
      getQuery() {
        const params = {
          ...this.searchObj,
          ...this.listQuery,
        }
        return params
      },
      async getList() {
        const that = this
        this.sum = 0
        // this.listLoading = true
        const params = this.getQuery()
        if (params.timeValue && params.timeValue.length) {
          params.StartTime = params.timeValue[0]
          params.EndTime = params.timeValue[1]
        }
        // params.UserId = this.userId
        // params.ExtendId = this.userId
        const { Data, Total } = await getTechCostPayee(params)
        if (Data) {
          const data = Data.map((item, index) => {
            for (let cell in item) {
              if (!item[cell] && this.$getType(item[cell]) !== 'Number') {
                item[cell] = '-'
              }
            }
            that.sum += item.Cost
            return item
          })
          this.list = data || []
        }
        // this.listLoading = false
        this.total = Total || 0
      },
      async del(ids) {
        await delUserFake({
          'action': 'del',
          'ids': ids,
          'params': ''
        })
        this.getList()
      },
      handleClick(index, row) {
        let msg = '是否审核？'
        let status = true
        if (row.IsAudit) {
          msg = '是否反审？'
          status = false
        }
        let obj = {
          "Id": row.Id, //主键Id
          "IsAudit": status //是否审核
        }
        this.$confirm(msg).then(res => {
          auditTechCostPayee(obj).then(_ => {
            this.$notify({
              title: '审核成功',
              message: 'success',
              type: 'success',
              duration: 2000
            })
          })
        })

      }
    }
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  .flex-end {
    justify-content: flex-end;
  }
  .font {
    font-size: 20px;
    font-weight: 500;
  }
</style>
